<template>
  <el-card class="category-card">
    <div slot="header" class="card-header">
      <span>分类</span>
    </div>
    <ul class="category-list">
      <li
          v-for="(item, index) in categoryGroups"
          :key="index"
          class="category-item"
      >
        <el-icon :icon="item.icon" class="item-icon"></el-icon>
        <span
            v-for="(subItem, subIndex) in item.items"
            :key="subIndex"
            class="sub-item"
        >
          {{ subItem }}
          <span class="divider" v-if="subIndex !== item.items.length - 1">/</span>
        </span>
      </li>
    </ul>
  </el-card>
</template>

<script setup lang="ts">
import { ElIcon } from 'element-plus';
import {
  Coin,

  Briefcase,
  Phone,




  ForkSpoon,


} from '@element-plus/icons-vue';

interface CategoryGroup {
  icon: any; // 实际可更精确定义为 Icon 类型，这里简化
  items: string[];
}

const categoryGroups: CategoryGroup[] = [
  {
    icon: Coin,
    items: ['年中盛典', '抢省钱补贴'],
  },
  {
    icon: Coin,
    items: ['电脑', '配件', '办公', '文具'],
  },
  {
    icon: Briefcase,
    items: ['工业品', '商业', '农业', '定制'],
  },
  {
    icon: Phone,
    items: ['家电', '手机', '通信', '数码'],
  },
  {
    icon: Coin,
    items: ['家具', '家装', '家居', '厨具'],
  },
  {
    icon: Coin,
    items: ['女装', '男装', '内衣', '配饰'],
  },
  {
    icon: Coin,
    items: ['女鞋', '男鞋', '运动', '户外'],
  },
  {
    icon: Coin,
    items: ['汽车', '珠宝', '文玩', '箱包'],
  },
  {
    icon: ForkSpoon,
    items: ['食品', '生鲜', '酒类', '健康'],
  },
  {
    icon: Coin,
    items: ['母婴', '童装', '玩具', '宠物'],
  },
  {
    icon: Coin,
    items: ['美妆', '个护', '娱乐', '图书'],
  },
];
</script>

<style scoped>
.category-card {
  width: 220px; /* 可根据实际布局调整宽度 */
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.item-icon {
  margin-right: 8px;
  color: #666;
}

.sub-item {
  color: #666;
}

.divider {
  margin: 0 4px;
  color: #ccc;
}
</style>